<template>
    <div class="body">
        <div class="view-list" @click="onViewSkip">
            <div selectId="active-1" :class="selectView == 'active-1'?'active':''">商品</div>
            <!-- <a href="#active-2"><div selectId="active-2" :class="selectView == 'active-2'?'active':''">规格</div></a> -->
            <div selectId="active-3" :class="selectView == 'active-3'?'active':''">介绍</div>
            <div selectId="active-4" :class="selectView == 'active-4'?'active':''">评论</div>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" id="active-1">
            <van-swipe-item>
                <van-image use-loading-slot class="grid-pic" :src="goods.image" @click="showImg(goods.image)">
                    <van-loading
                        slot="loading"
                        type="spinner"
                        size="20"
                        vertical
                    />
                </van-image>
            </van-swipe-item>
        </van-swipe>
            <p class="title">{{goods.name}}</p>
            <p class="sub-title">{{goods.info}}</p>
            <p class="price">
                <span class="price">￥{{getPrice()}}</span>
                <span class="name">/{{goods.unit_name}}</span>
                <span v-if="goods.is_activity" class="line-price">￥{{goods.is_activity && $store.getters.wxUserInfo.is_believe?goods.ot_price:goods.price}}</span>
            </p>
            <!-- <van-stepper class="goods-stepper" v-model="goods.cate_num"  min="0" theme="round" button-size="22"/> -->
            <div class="goods-info">
                <div class="info-item"><p>{{goods.cate_name}}</p><p>品种</p></div>
                <div class="info-item"><p>{{goods.area}}</p><p>发货地</p></div>
                <div class="info-item"><p>{{sales}}</p><p>销量</p></div>
            </div>
            <van-cell-group>
                <van-cell title="商品介绍" id="active-3"/>
            </van-cell-group>
            <div v-html="goods.description" class="detail"></div>
            <van-cell-group>
                <van-cell title="评论" id="active-4"/>
            </van-cell-group>
                <van-empty v-if="!productReply.length" description="暂无用户评论" />
                <van-cell v-for="(item,index) of productReply" :key="index">
                    <template #title>
                        <div class="user-info">
                            <!-- <img class="head-img" :src="item.portrait"> -->
                            <van-image
                            round
                            width="2rem"
                            height="2rem"
                            :src="item.portrait"
                            />
                            <p>{{item.username}}</p>
                        </div>
                    </template>
                    <template #label>
                        <p class="comment-info">{{item.comment?item.comment:''}}</p>
                        <van-image width="100" height="100" :src="item.pics" @click="showImg(item.pics)"/>
                        <p class="comment-info reply">{{item.merchant_reply_content?'商家回复:'+item.merchant_reply_content:''}}</p>
                    </template>
                    <template #right-icon>
                        <div class="right-icon">
                            <van-rate v-model="item.goods_score" readonly />
                            <p class="time">{{$moment(item.add_time*1000).format('YYYY-DD-MM hh:mm:ss')}}</p>
                        </div>
                    </template>
                </van-cell>
            <van-goods-action class="add-content">
                <van-goods-action-icon icon="cart-o" text="购物车" :badge="cart" @click="$router.push('/cart')" />
                <van-goods-action-button
                    type="warning"
                    :text="goods.status == 1?'加入购物车':'暂未上架'"
                    @click="goods.status == 1?addCart():''"
                    :color="goods.status == 1?'#3DCEB9':'#ccc'"
                />
                <!-- <van-goods-action-button
                    type="danger"
                    text="立即购买"
                    @click="onClickButton"
                /> -->
        </van-goods-action>
        <van-divider>我是有底线的</van-divider>
    </div>
</template>
<script>
import {goodInfo,CartNum,WxSign} from '../ajax'
import {Toast,ImagePreview } from 'vant'
import wxapi from '../wxapi.js';
import {share,goodsShare} from '../wxShare'
export default {
    data() {
        return {
            showClassInfo:false,
            // banner:[],
            // price:{},
            // productInfo:{},
            selectView:'active-1',
            cart:0,
            goods: {},
            goods_num:1,
            productReply:[]
        }
    },
    created(){
        this.getGoodInfo();
        this.getCartNum();
    },
    beforeDestroy(){
        share();
    },
    computed:{
        sales(){
            return parseFloat(this.goods.sales).toFixed(0);
        }
    },
    methods:{
        getPrice(){
            return parseFloat(this.goods.is_activity?this.goods.act_price:this.$store.getters.wxUserInfo.is_believe?this.goods.price:this.goods.ot_price).toFixed(2)
        },
        onViewSkip(e){
            if(!e.target.getAttribute('selectId')) return;
            this.selectView = e.target.getAttribute('selectId');
            let doc = document.getElementById(this.selectView).scrollIntoView();  
        },
        getCartNum(){
            const data = {
                group_id:this.$store.getters.wxUserInfo.group_id
            }
            CartNum(data).then(res=>{
                this.cart = res;
            })
        },
        getGoodInfo(){
            const data = {
                admin_id:this.$store.getters.admin_id,
                goods_id:this.$route.query.id,
                group_id:this.$store.getters.wxUserInfo.group_id
            }
            goodInfo(data).then(res=>{
                this.goods = res.productInfo;
                this.productReply = res.productReply;
                        goodsShare(this.goods); 
            })
        },
        addCart(){
            if(this.$store.getters.wxUserInfo.is_adopt !== 1){
                Toast('用户暂未通过公司审核,暂不能添加购物车');
                return;
            }
            // console.log(this.$store.getters.cartList);
            this.goods.num = ++this.goods.cate_num || 1;
            this.goods.goods_id = this.goods.id;
            console.log({item:this.goods,cate_id:this.goods.cate_id});
            this.$store.commit('edit_cart',{item:this.goods,cate_id:this.goods.cate_id})
        },
        onSelectClicked(data){
            this.price.price = (data.selectedSkuComb.price)/100+'.00';
            this.price.name = data.skuValue.name;
            this.banner = data.skuValue.imgArr;
        },
        showImg(img){
            ImagePreview([img]);
        }
    }
}
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    $white:#fff;
    $red:#FF5245;
    $gray:#9B9B9B;
    .body{
        height: calc(100vh - 6rem);
        overflow: auto;
        background: $white;
        .title{
            padding: 0.4rem 1rem;
            padding-bottom: 0.2rem;
            font-size: 1.2rem;
            font-weight: bolder;
        }
        .sub-title{
            padding: 0.4rem 1rem; 
            padding-top: 0.2rem;
            font-size: 0.8rem;
            color: #999;
        }
        .goods-info{
            width:90%;
            height: 4rem;
            background: #eee;
            margin:auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .info-item{
                width: 25%;
                height: 70%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                border-right: 1px solid $green;
                :last-child{
                    font-size: 0.8rem;
                    color: #999;
                }
                :first-child{
                    font-size: 1rem;
                    font-weight: bold;
                }
            }
            :last-child{
                border: none;
            }
        }
        .price{
            .price{
                font-size: 1.4rem;
                font-weight: bolder;
                color: $red;
                padding: 0 1rem;
            }
            .name{
                font-size: 0.8rem;
                color: $gray;
            }
            .line-price{
                text-decoration: line-through;
                font-size: 0.8rem;
                color: $gray;
                padding-left: 0.4rem;
            }
        }
        .spec{
            width: 90%;
            height: 4rem;
            background: #F7F7F7;
            margin: 1rem auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .item{
                text-align: center;
                height: 3rem;
                // line-height: 2rem;
                justify-content: space-around;
                display: flex;
                flex-direction: column;
                :first-child{
                    font-size: 1rem;
                    font-weight: bolder;
                }
                :last-child{
                    font-size: 0.8rem;
                    color: $gray;
                }
            }
        }
        .view-list{
            width: 100%;
            height: 3rem;
            position: fixed;
            background: #fffc;
            z-index: 1000;
            display: flex;
            justify-content: space-around;
            align-items: center;
            line-height: 3rem;
            a{
                color: #000;
            }
            .active{
                color: $green;
                font-weight: 600;
                border-bottom: 0.2rem solid $green;
            }
        }
        .detail{
            width: 100%;
            /deep/ img{
                width: 100%;
            }
        }
        .my-swipe .van-swipe-item {
        color: $white;
        font-size: 20px;
        height: 16rem;
        text-align: center;
        }
        .content {
            padding: 16px 16px 160px;
        }
        .grid-pic{
            width: 100%;
            height: 100%;
        }
        .goods-cart-num{
            padding: 1rem;
        }
        .van-cell__title {
            font-weight: 500;
            font-size: 1rem;
        }
        .user-info{
            display: flex;
            justify-content: start;
            align-items: center;
            width: 6rem;
            p{
                margin-left: 0.4rem;
            }
        }
        .comment-info{
            font-size: 1rem;
            color: #333;
            line-height: 2rem;
        }
        .right-icon{
            // display: flex;
            text-align: right;
            .time{
                font-size: 0.8rem;
                color: $gray;
            }
        }
        .reply{
            width:100%;
            font-size: 0.8rem;
            color: #999;
            padding: 1rem;
        }
        .van-cell__label{
            width: 100%;
        }
    }
</style>